<template>
	<view class="container">
		<view class="header">
			<text class="welcome">欢迎</text> <br>
			<text class="welcome">请登录账号</text>
		</view>
		<view class="login-form">
			<label class="labelmsg">用户名</label>
			<input type="text" v-model="username" class="inputmsg" />
			<label class="labelmsg">密码</label>
			<input type="password" v-model="password" class="inputmsg" />
			<button type="primary" @click="handleLogin">登录</button>
			<view class="togegist">
				<text @click="handleRegister">没有账号？去注册</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		http
	} from '../../http.js'
	import {
		userStore
	} from '../../store/userstore.js'

	const username = ref('')
	const password = ref('')
	const userstore = userStore()

	const handleLogin = async () => {
		const res = await http({
			url: 'http://localhost:3000/user/login',
			method: "POST",
			data: {
				username: username.value,
				password: password.value
			},
		})
		console.log(res)
		if (res.code == 200 && res.msg == 'success') {
			console.log(res.data);
			uni.switchTab({
				url: '/pages/index/index'
			})
			userstore.username = res.data.username
			userstore.password = res.data.password
			userstore.userId = res.data.userId
			userstore.avator = res.data.avator
			console.log(res);
		} else {
			uni.showToast({
				title: '用户名或密码错误',
				icon: 'none'
			});
		}
	}

	const handleRegister = () => {
		uni.navigateTo({
			url: '/pages/regist/regist'
		})
	}
</script>

<style scoped>
	.container {
		margin-top: 50px;
		padding: 15px;
	}

	.welcome {
		font-size: 22px;
		font-weight: bold;
	}

	.login-form {
		margin-top: 45px;
	}

	.labelmsg {
		color: darkgray;
	}

	.inputmsg {
		border: none;
		border-bottom: 1px solid lightgrey;
		margin-top: 10px;
		margin-bottom: 30px;
	}

	button {
		background-color: #1E90FF;
		margin-top: 70px;
		border-radius: 50px;
	}

	.togegist {
		margin-top: 20px;
		font-size: 12px;
		text-align: center;
		color: #1E90FF;
	}
</style>
